<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href='./layui/css/layui.css'>
    <script src="./layui/layui.js"></script>
    <style>
        body {
            background: linear-gradient(to right, #c0c0aa, #1cefff);
        }

        .layui-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .layui-nav .left {
            font-size: 40px;
            font-weight: bolder;
        }

        .main {
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-top: 20px;
        }

        .news-content {
            width: 600px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px;
        }

        .news-discuss {
            width: 600px;
            height: 300px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .news-discuss textarea {
            width: 600px;
            height: 200px;
            resize: none;

        }

        .news-discuss .layui-btn {
            background: #b5b1a1;
            float: right;
        }
    </style>
</head>

<body>
    <ul class="layui-nav">
        <li class="left">news</li>
        <li class="layui-nav-item userInfo"></li>
    </ul>
    <h1>新闻标题</h1>
    <!-- 新闻详情 -->
    <div class="news-content">
    </div>
    <!-- 新闻评论 -->
    <div class="news-discuss">
        <textarea cols="30" rows="10"></textarea>
        <button class="layui-btn addComment" type="button">立即发布评论</button>
    </div>
    <ol class="news-discuss-ol" style="margin-top: 20px; width: 610px; margin-left: auto; margin-right: auto;">
        <li>
            <div class="cmment-content">评论内容</div>
            <div class="comment-edit">
                <button class="agree">点赞</button>
                <button>删除</button>
            </div>
        </li>
    </ol>
</body>
<script src="../js_common/AllFunction.js"></script>
<script>
    let userInfo = getCookie('userInfo') ? JSON.parse(getCookie('userInfo')) : null;
    if (userInfo) {
        document.querySelector('.userInfo').innerHTML = `${userInfo.mobile} 用户欢迎`
    } else {
        document.querySelector('.userInfo').innerHTML = '<a href="login.html">登录</a>'
    }
    const newsId = getUrlParam('id');
    ajax({
        url: 'http://phpclub.org.cn/edu/server/getContent.php',
        data: { id: newsId },
        callback: function (response) {

            // document.querySelector('h1').innerHTML = response.data.title;
            // document.querySelector('.news-content').innerHTML = response.data.content;
        }
    })
    //发表评论
    document.querySelector('.addComment').onclick = function () {
        if (!userInfo) {
            location.href = 'login.html?callback=' + encodeURIComponent(location.href);
            return;
        }
        ajax({
            url: 'http://phpclub.org.cn/edu/server/addComment.php',
            method: 'post',
            data: { userId: userInfo.id, newsId, content: document.querySelector('textarea').value },
            callback: function () {
                console.log();
            }
        })
    }
    //评论列表
    let data = { newsId, page: 2, pageSize: 15 }
    if (userInfo) {
        // 用户登录
        data.userId = userInfo.id;
    }
    ajax({
        url: 'http://phpclub.org.cn/edu/server/getComment.php',
        data,
        callback: function (response) {
            console.log(response);
            let html = '';
            response.data.forEach(item => {
                html += `<li>
                    <div class="cmment-content">${item.content}</div>
                    <div class="comment-edit">
                        <button class='agree'>点赞</button>
                        <button>删除</button>
                    </div>
                </li>`
            })
            document.querySelector('.news-discuss-ol').innerHTML = html;
        }
    })
    //点赞
    document.querySelector('.news-discuss-ol').onclick = function (event) {
        console.log(event.target.className == 'agree')
        if (event.target.className == 'agree') {
            if (!userInfo) {
                location.href = 'login.html?callback=' + encodeURIComponent(location.href);
                return;
            }
            ajax({
                url: 'http://phpclub.org.cn/edu/server/commentLike.php',
                method: 'post',
                data: {userId:userInfo.id,commentId:userInfo.id},
                callback: function (response) {
                    alert(response.msg)
                }
            })

        }
    }


</script>

</html>